<template>
    <div>
        <el-dialog title="筛查报告详情" :visible.sync="open" width="980px" append-to-body>
            <el-descriptions title="学生基本信息" :column="3" border>
                <!-- <template slot="extra">
                    <el-button type="primary" size="small">操作</el-button>
                </template> -->
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user"></i>&nbsp;姓名
                    </template>
                    {{detailInfo.name}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-female"></i>&nbsp;性别
                    </template>
                    {{detailInfo.gender}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-date"></i>&nbsp;年龄
                    </template>
                    {{detailInfo.age}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>&nbsp;手机号
                    </template>
                    {{detailInfo.bindPhone}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-school"></i>&nbsp;学校
                    </template>
                    {{detailInfo.schoolName}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-postcard"></i>&nbsp;班级
                    </template>
                    {{detailInfo.className}}
                </el-descriptions-item>
            </el-descriptions>
            <el-descriptions class="margin-top" title="筛查结果" :column="3" >
                <!-- <template slot="extra">
                    <el-button type="primary" size="small">操作</el-button>
                </template> -->
                <el-descriptions-item label="检查日期">
                    {{detailInfo.checkDate}}
                </el-descriptions-item>
                <el-descriptions-item label="身高">
                    {{detailInfo.height}}
                </el-descriptions-item>
                <el-descriptions-item label="体重">
                    {{detailInfo.weight}}
                </el-descriptions-item>
            </el-descriptions>
            <el-divider content-position="left">脊柱筛查</el-divider>
            <el-descriptions :column="3" >
                <el-descriptions-item label="高低肩">
                    {{detailInfo.gaodijian}}
                </el-descriptions-item>
                <el-descriptions-item label="剃刀背">
                    {{detailInfo.tidaobei}}
                </el-descriptions-item>
                <el-descriptions-item label="其他">
                    {{detailInfo.spineOther}}
                </el-descriptions-item>
                <el-descriptions-item label="筛查建议" :span="3">
                    {{detailInfo.advise}}
                </el-descriptions-item>
            </el-descriptions>
            <el-divider content-position="left">足部筛查</el-divider>
            <el-descriptions :column="3" >
                <el-descriptions-item label="足部">
                    {{detailInfo.foot}}
                </el-descriptions-item>
                <el-descriptions-item label="足趾">
                    {{detailInfo.toes}}
                </el-descriptions-item>
                <el-descriptions-item label="站立足">
                    {{detailInfo.standFoot}}
                </el-descriptions-item>
                <el-descriptions-item label="其他">
                    {{detailInfo.footOther}}
                </el-descriptions-item>
                <el-descriptions-item label="筛查建议">
                    {{detailInfo.footAdvise}}
                </el-descriptions-item>
            </el-descriptions>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="close">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { getDetail } from "@/api/records/records.js";
    export default {
        name: "records-detail",
        data() {
            return {
                open: false,
                detailInfo: {
                    name: '',
                    className: '',
                    age: undefined,
                    gender: undefined,
                    bindPhone: '',
                    height: undefined,
                    weight: undefined,
                    checkDate: undefined,
                    gaodijian: undefined,
                    tidaobei: '',
                    spineOther: '',
                    advise: '',
                    spineResult: '',
                    spineConclusion: '',
                    foot: [],
                    toes: [],
                    standFoot: [],
                    footOther: '',
                    footAdvise: '',
                    examiner: ''
                }
            }
        },
        methods: {
            close() {
                this.open = false
            },
            handleOpen(id) {
                this.open = true
                console.log(id)
                getDetail({id}).then(res => {
                    console.log(res)
                    if(res.data) {
                        this.detailInfo = res.data
                    }
                    else {
                        this.$modal.msgError("查询失败");
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .margin-top{
        margin-top: 30px;
    }
</style>